<template>
	<view :data-theme="theme" style="display: flex;flex-direction: column; height: 100%;">
		<scroll-view scroll-y="true" :style="{ 'padding-bottom':'20rpx' }" style="height: 100%; overflow: hidden;">
			<view style="padding: 10px 10px 10px; 10px;background-color: #fff;">
				<view class="middle">
					<checkbox-group class="checke_list" v-model="checkboxValue" @change="checkboxChange">
						<label class="uni-list-cell uni-list-cell-pd checke_item" v-for="(ele, index) in cityDetail"
							:key="index">
							<view class="item_top"
								style="margin-bottom: 32rpx;border-bottom: 1px solid #eee;justify-content: space-between;display: flex;padding-bottom: 20rpx;">
								<view class="item_img">
									{{ele.name}}
								</view>
								<checkbox :value="JSON.stringify(ele)" :iconColor="bgColor" :color="bgColor"
									:activeBorderColor="bgColor" :activeBackgroundColor="bgColor" :backgroundColor="bgColor" :disabled="ele.disabled"
									class="round-checkbox" />
							</view>
						</label>
					</checkbox-group>
					<view style="height: 50px;"></view>
				</view>
			</view>
		</scroll-view>


		<view class="footer" style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
			<view>
				已选 <span class="mian_color"
					style="line-height: 28rpx;padding:0 20rpx;">{{checkboxValue?checkboxValue.length:'0'}}</span>
			</view>
			<view>
				<button @click="sureAddOperateCity" class="bg_color button_footer">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryBusinessOperateCityApi,
	} from '@/api/operateCity.js';
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				dataForm: {
					queryType: 1,
					parentId: 0,
					display: 1,
				}, //右侧城市弹框查询
				cityDetail: [],
				checkboxValue: [],
				paramsData: null, //上页面所传的值
			};
		},
		onLoad(params) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			if (params.data.length > 0) {
				this.paramsData = JSON.parse(params.data);
			}
		},
		created() {
			this.getList();
		},
		methods: {
			getList() {
				let that = this;
				queryBusinessOperateCityApi(this.dataForm).then((res) => {
					this.cityDetail = res.data;
					for (let item of that.cityDetail) {
						item.disabled = false;
					};
					for (let i = 0; i < that.cityDetail.length; i++) {
						for (let j = 0; j < that.paramsData.length; j++) {
							if (that.cityDetail[i].useId == that.paramsData[j].useId) {
								that.cityDetail[i].disabled = true;
							}
						}
					}
				});
			},
			//点击事业部
			checkboxChange(checkboxValue) {
				let checkBoxValue = checkboxValue.detail.value
				this.checkboxValue = checkBoxValue;
			},
			// 确认事件
			sureAddOperateCity() {
				if (!this.checkboxValue.length) {
					return uni.showToast({
						title: '请先选择经营城市',
						icon: 'error',
						duration: 2000
					});
				};
				let chooseName = this.checkboxValue.map((item) => JSON.parse(item));
				let modifiedArray = chooseName.map(obj => {
					const {
						createTime,
						disabled,
						...rest
					} = obj; //删除部分属性
					return rest
				});
				const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
				uni.navigateBack({
					delta: 1,
					success: (res) => {
						prevPage.$vm.otherFun(modifiedArray);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.mian_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		height: 60px;
		padding: 0 30rpx;

		view {
			margin-right: 20px;
			flex: 1;
		}

		.left_button_footer {
			border-radius: 22rpx;
			padding: 20rpx 40rpx;
			color: #fff;
			background-color: #f0f0f0;
		}

		.button_footer {
			border-radius: 22rpx;
			padding: 20rpx 40rpx;
			color: #fff;
			@include main_bg_color(theme);
		}
	}
</style>